<template>
  <div class='router-div'>
    <div class="query-header">
      <div class="query-bar clearfix">
        <el-select v-model="searchKey" placeholder="请选择查询字段">
          <el-option label="不过滤" value="">

          </el-option>
          <el-option
            v-for="item in configTable.props"
            :key="item.prop"
            :label="item.name"
            :value="item.prop">
          </el-option>
        </el-select>
        <el-input v-model="searchValue" placeholder="请输入查询内容"></el-input>
        <el-button type="primary" @click="queryData">查询</el-button>
        <el-button type="primary" @click="clearData">取消选择</el-button>

      </div>

    </div>

    <div class="body">
      <table class="gridtable">
        <thead>
        <th v-for="conProp in configTable.props">
          {{conProp.name}}
        </th>
        <th>操作</th>
        </thead>
        <tbody>
        <tr v-for="item in tableData.datas">
          <td v-for="conProp in configTable.props">{{item[conProp.prop]}} </td>
          <td>
            <el-button @click="onSubmit(item.id)" type="text" size="small">选择</el-button>
          </td>
        </tr>
        </tbody>

      </table>
    </div>

    <div class="footer">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="tableData.total"
        :page-size=pageSize
        @current-change="pageChange"
      >
      </el-pagination>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onCancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
  import common from "../../data/common"
  import configFile from "../../../static/js/data"
  import {Toast} from "mint-ui"
  import {onSelectedProp, event} from "../../data/bus";

  export default {
    name: "select-prop",
    props:[
      "conProp",
    ],
    data(){return{
      configTable:{},
      tableData: "",
      searchKey: '',
      searchValue:"",
      currPage:0,
      pageSize:12,

    }},
    methods:{
      getData(){
        var url = common.apidomain + "/admin/select?" +
          "tableName=" + this.conProp.tableName
          +"&currPage=" + this.currPage
          +"&searchKey=" + this.searchKey
          +"&searchValue=" + this.searchValue;
        this.$http.get(url).then(ret=>{
          this.tableData = ret.body.data;
        },ret=>{
          this.$message(ret.body.msg);
        })
      },
      queryData() {
        this.currPage = 0;
        this.getData()
      },
      pageChange(currPage){
        this.currPage = currPage - 1;
        this.getData();
      },
      clearData() {
        event.$emit(onSelectedProp,this.conProp.prop, 0);
        this.$emit(onSelectedProp,this.conProp.prop, 0);
      },
      onSubmit(value){
        event.$emit(onSelectedProp,this.conProp.prop, value);
        this.$emit(onSelectedProp,this.conProp.prop, value);
      },
      onCancel() {
        this.$emit("dialogClose","");
      },
    },
    watch:{
      conProp: {
        handler(newval, oldval) {
          for (var i=0; i<configFile.submitConfig.length; i++) {
            var config = configFile.submitConfig[i];
            console.log("SelectProp.vue watch conProp configTable=" + config.tableName + "," + this.conProp.tableName)
            if (config.tableName == this.conProp.tableName) {
              this.configTable = config;
              break;
            }
          }

          this.queryData();
        }
      },
    },
    created() {
      console.log(this.conProp.name);
      for (var i=0; i<configFile.submitConfig.length; i++) {
        var config = configFile.submitConfig[i];
        console.log("SelectProp.vue watch conProp configTable=" + config.tableName + "," + this.conProp.tableName)
        if (config.tableName == this.conProp.tableName) {
          this.configTable = config;
          break;
        }
      }

      this.queryData();
    },
    mounted() {
      // debugger
    }
  }
</script>

<style scoped>
  .query-bar :nth-child(n){
    float: left;
    display: flex;
    justify-content: space-around;
  }
  .query-bar :nth-child(2){
    width: 200px;
    margin-left: 10px;
    margin-right: 10px;
  }
  .body {
    background-color: antiquewhite;
    min-height: 100%;
    margin-bottom: 0px;
  }
  table.gridtable {
    width: 100%;
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
  }
  table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
  }
  table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
  }
</style>
